<template>
	<view class="back-img u-f-ajc">
		<!-- 背景图片 -->
		<image @tap="changebackimg" :src="backimg" mode="widthFix" lazy-load></image>
		
		<view class="user-heard u-f-ajc">
			<!-- 头像 -->
			<view class="user-heard-userimg">
				<image :src="user.userimg" mode="widthFix" lazy-load></image>
			</view>
			<!-- 昵称 -->
			<view class="user-heard-userinfo u-f-ac">
				<text>{{user.username}}</text><tag-sex-age :usersex="user.usersex" :userage="user.userage" ></tag-sex-age>
			</view>
			<!-- 关注 -->
			<view @tap="changefollow" :class="user.isfollow?'user-heard-nofollow':'user-heard-follow'">
				<view  v-if="user.isfollow">
					取消关注
				</view>
				<view v-else>
					<u-icon name="plus"></u-icon> 关注
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import tagSexAge from '../../components/common/tag-sex-age.vue'
	export default {
		props:{
			user:Object,
			no:Number
		},
		components:{
			tagSexAge
		},
		
		computed:{
			backimg(){
				return "../../static/bgimg/"+this.no+".jpg"
				
				
			}
		},
		methods: {
			//关注
			changefollow(){
				this.$emit("changefollow")
			},
			//切换背景图
			changebackimg(){
				this.$emit("changebackimg")
				
			}
		}
	}
</script>

<style>
	.user-heard-follow{
			margin-top: 70upx;
			background: #FFE933;
			padding: 3upx 10upx;
			border-radius: 10upx;
		}
		.user-heard-nofollow{
			margin-top: 70upx;
			background: #EEEEEE;
			padding: 3upx 10upx;
			border-radius: 10upx;
		}
	.user-heard-userinfo{
		margin-top: 20upx;
		font-size: 35upx;
		color: #FFFFFF;
	}
	.back-img image{
		width: 100%;
	}
	.back-img{
		height: 500upx;
		overflow: hidden;
	}
	.user-heard{
		flex-direction: column;
		position: absolute;
	}
	.user-heard-userimg{
		margin-top: 40upx;
	}
	.user-heard image{
		width: 120upx;
		height: 120upx;
		border-radius: 50%;
	}
</style>
